import './index.css'
import {people} from "./data";
import {getImageUrl} from "./utils";

export default function List(){
    const listItems = people.map((person) =>
        <li key={people.id}>
            <img src={getImageUrl(person)} alt={person.name}/>
            <p>
                <strong>{person.name}</strong>
                <br/>
                <span>{person.profession}</span>
                <br/>
                <span>{person.accomplishment}</span>
            </p>
        </li>
    )
    return (
        <article>
            <h2>列表渲染</h2>
            <ul className='user-list'>{listItems}</ul>
        </article>
    )
}
